<template>
    <div class="category-page">
        <TopSearchBar @search="onSearch" @click-left="onClickLeft"/>
        <div class="container">
            <div class="left">
                <div class="van-sidebar">
                    <div
                        v-for="(item, index) in allCategoryList"
                        :key="index"
                        @click="onChange(index)"
                        class="sidebar-item"
                    >
                        <a
                            :href="'#'+index"
                            :class="index === activeKey ? 'sidebar-item-text sidebar-item-text-active' : 'sidebar-item-text'"
                        >
                            {{item.categoryName}}
                        </a>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="list" @scroll="handleScroll">
                    <div  class="list-item" >
                        <div class="item-wrapper"  v-for="(item, index) in allCategoryList" :key="index" :id="index"  >
                            <div>
                                <div v-for="(itemSecond, indexSecond) in item.childList" :key="indexSecond" class="second-list">
                                    <div class="second-title">{{itemSecond.categoryName}}</div>
                                    <div class="third-list">
                                        <div class="third-item" v-for="(itemThird, indexThird) in itemSecond.childList" :key="indexThird" @click="toCategoryChild(index,indexSecond,indexThird)">
                                            <img :src="itemThird.categoryIcon ? itemThird.categoryIcon : imgSrc[0]" />
                                            <div class="third-title">{{itemThird.categoryName}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { Sidebar, SidebarItem } from 'vant';
    import TopSearchBar from "../../components/TopSearchBar";
    export default {
        name: "category",
        components: {
            [Sidebar.name]: Sidebar,
            [SidebarItem.name]: SidebarItem,
            TopSearchBar
        },
        data() {
            return{
                imgSrc: [
                    require('@img/img-error.png')
                ],
                vertical:true,
                activeKey:0,
                allCategoryList:[]
            }
        },
        created() {
            this.getAllGoodsCategoryList();
        },
        methods:{
            onSearch(keyword){
                this.$router.push({
                    path: "/search",
                    query:{
                        keyword : keyword
                    }
                })
            },
            getAllGoodsCategoryList(){
                this.$api.getAllGoodsCategoryList().then((res)=>{
                    this.allCategoryList = res.data.data;
                });
            },
            onClickLeft(){
                this.$router.push({
                    path: "/"

                })
            },
            onChange(id){
                this.activeKey = id;
            },
            toCategoryChild(f,s,t){
                this.$router.push({
                    path: "/categoryChild",
                    query:{
                        fid:f,
                        sid:s,
                        tid:t
                    }
                })
            },
            handleScroll(){

            }
        }
    }
</script>

<style lang="scss" scoped>
    .category-page{
        .container{
            display: flex;
            height: 100%;
            justify-content: space-between;
            .left{
                position: absolute;
                overflow: auto;
                height: 92vh;
                width:23vw;
                background-color: #FFFFFF;
                .van-sidebar{
                    flex:0 0 85px;
                    .sidebar-item{
                        padding: 18px 5px 18px 0px;
                        .sidebar-item-text{
                            display: inline-block;
                            border-left: 3px solid transparent;
                            padding-left: 12px;
                            position: relative;
                            color: #1A1A1A;
                        }
                        .sidebar-item-text-active{
                            border-left: 3px solid #D82D11;
                            color: #D82D11;
                            font-weight: bold;
                        }
                        .sidebar-item-text:after{
                            content: "";
                            height: 1px;
                            width: 70px;
                            margin-left: 12px;
                            background-color: #E6E6E6;
                            position: absolute;
                            bottom: -18px;
                            left: 0;
                        }
                    }
                }
            }
            .right{
                position: absolute;
                margin-left: 23vw;
                height: 92%;
                width: 77vw;
                .list{
                    overflow-y: scroll;
                    height: 100%;
                    .list-item{
                        height: 100%;
                        .item-wrapper{
                            padding:5px;
                            .second-list{
                                padding: 5px;
                                background-color: #ffffff;
                                margin-bottom: 15px;
                                .second-title{
                                    font-size: 14px;
                                    font-weight: bold;
                                    text-align: center;
                                    padding:8px 0
                                }
                                .third-list{
                                    display: flex;
                                    flex-flow: row;
                                    flex-wrap: wrap;
                                    .third-item{
                                        padding:8px;
                                        margin-bottom: 8px;
                                        img{
                                            width: 72px;
                                            height: 72px;
                                        }
                                        .third-title{
                                            font-size: 12px;
                                            text-align: center;
                                            color:#999999;
                                        }

                                    }
                                }
                            }
                        }
                    }
                }
            }


        }

    }
</style>
